<template>
  <div class="Nav">

	<ul class="meau">
    <li class="img">
     <router-link to='/hh'>
         <img src="~assets/img/hh_1.png" alt="">
     </router-link>
		</li>
		<li class="hover"><router-link to='/hh'>首页</router-link>
		</li>

			<li class="hover"><router-link to=''>关于我们</router-link>
			<ul class="submenu">
				<li><router-link to=''>董事长寄语</router-link></li>
				<li><router-link to=''>团队风采</router-link></li>
				<li><router-link to=''>招贤纳士</router-link></li>
			</ul>
		</li>

	<li class="hover"><router-link to='/lenders'>我要贷款</router-link>
			<ul class="submenu">
				<li><router-link to='/duomi'>多米贷款</router-link></li>
				<li><router-link to='/chedai'>车主信用贷</router-link></li>
				<li><router-link to='/chedi'>车抵贷</router-link></li>
				<li><router-link to='/fangdi'>房抵贷</router-link></li>
				<li><router-link to='/gongzi'>工资贷</router-link></li>
			</ul>
		</li>

		<li class="hover">
      <router-link to='/cft'>我要理财</router-link>
			<ul class="submenu">
				<li><router-link to='/cateory'>众邦宝</router-link></li>
				<li><router-link to='/cateory'>新网季得利</router-link></li>
				<li><router-link to='/cateory'>弘康5年</router-link></li>
				<li><router-link to='/cateory'>易方达</router-link></li>
				<li><router-link to='/cateory'>大成中证</router-link></li>
			</ul>
		</li>

		<li class="hover"><router-link to=''>成功案例</router-link>
			<ul class="submenu">
			  	<li><router-link to=''>成功案例1</router-link></li>
				<li><router-link to=''>成功案例2</router-link></li>
				<li><router-link to=''>成功案例3</router-link></li>
			</ul>
		</li>	

    <li class="hover"><router-link to=''>新闻中心</router-link>
			<ul class="submenu">
			  <li><router-link to=''>新闻中心1</router-link></li>
				<li><router-link to=''>新闻中心2</router-link></li>
				<li><router-link to=''>新闻中心3</router-link></li>
			</ul>
		</li>	
     <li class="hover"><router-link to=''>公司公益</router-link>
			<ul class="submenu">
			  <li><router-link to=''>公益活动1</router-link></li>
				<li><router-link to=''>公益活动2</router-link></li>
				<li><router-link to=''>公益活动3</router-link></li>
				<li><router-link to=''>公益活动4</router-link></li>
				<li><router-link to=''>公益活动5</router-link></li>
			</ul>
		</li>
    
     <li class="hover"><router-link to=''>联系我们</router-link>
			<ul class="submenu">
			 
			</ul>
		</li>	

     <li class="hover">
       <router-link to=''>登录</router-link>
			<ul class="submenu">
			  <li><router-link to=''>注册</router-link></li>
				<li><router-link to=''>注册协议</router-link></li>
				<li><router-link to=''>个人资料</router-link></li>
			</ul>
		</li>	

	</ul>

</div>
</template>



<style lang="scss">
.img{
 img{
    display: block;
    vertical-align: middle;
    padding: 5px 0 0 20px;
 }
}
.Nav{
  text-align: center;
  width: 1200px;
  margin: 0 auto;
}

/*修改ul,li样式*/
.meau,.meau li{
  list-style: none;
}
.meau{

 display: flex;
}

/*所有.meau中的li样式*/
.meau li{
     background: #ffffff;
    flex: 1;
   
}

/*.meau中子元素li样式*/
.meau>li{
 
  position: relative; /*给a标签一个定位,等下别跑出天际*/
}



.submenu li a{
  display: block;
}

/*.meau中的a样式*/
.meau a {
  text-align: center;
  font-size: 16px !important;
  color:#666666;
  display: block;
  font-family: 'Lucida Console';
  font-size: 20px;
  line-height: 55px;
  text-decoration: none;
}
/*当鼠标移动到li和a时*/
.meau .hover:hover{
    background-color: #d1bab5;
    background: #C6DCFD;

}
.mi:hover>a{
  border-radius: 5px 0 0 0;
    border-left: 3px solid #897f7f;
    color: #C4302B;
   
}
/*.submenu样式*/
.submenu{
  height: 0;
  position: absolute;
  width: 100%;
  perspective: 500px;
}
.submenu li{
  opacity: 0;
  transform: rotateY(90deg);
  transition: opacity .4s, transform .5s;
}
/*当鼠标移动到li属性时, a 属性出现的效果*/
.meau .submenu li:hover a {
    border-left: 2px solid #888888;
    border-radius: 0;
    background: #C6DCFD;
}
.meau > .hover:hover .submenu{
    z-index: 10;
}
.meau > .hover:hover .submenu li{
    opacity: 1;
    transform: none;
}
/*当鼠标移到menu的li元素时 .submenu的第一个li元素的样式为*/
.meau .hover:hover .submenu .hover:nth-child(1) {
    transition-delay: 0s;
}
.meau .hover:hover .submenu .hover:nth-child(2) {
    transition-delay: 50ms;
}
.meau .hover:hover .submenu .hover:nth-child(3) {
    transition-delay: 100ms;
}
.meau li:hover .submenu li:nth-child(4) {
    transition-delay: 150ms;
}
.meau li:hover .submenu li:nth-child(5) {
    transition-delay: 200ms;
}
/*当鼠标离开时*/
 .submenu li:nth-child(1) {
    transition-delay: 200ms;
}
 .submenu li:nth-child(2) {
    transition-delay: 150ms;
}
 .submenu li:nth-child(3) {
    transition-delay: 100ms;
}
 .submenu li:nth-child(4) {
    transition-delay: 50ms;
}
 .submenu li:nth-child(5) {
    transition-delay: 0ms;
}
</style>

